<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>

<canvas id="circuitCanvas" width="550" height="320"></canvas>

<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Coordinate Setup ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 20px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const x_left = 50;
    const x_right = 500;
    const y_top = 50;
    const y_bottom = 200;
    const x_mid = 275;
    const y_batt = 260;
    const r_w = 60; // resistor width
    const r_h = 20; // resistor height

    // --- Helper Functions ---
    function drawJunction(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 4, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();
    }

    function drawSwitchPivot(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();
    }
    
    function drawLabelWithSubscript(base, sub, x, y) {
        const baseFont = 'italic 20px "Times New Roman"';
        const subFont = 'italic 14px "Times New Roman"';
        
        ctx.font = baseFont;
        const baseWidth = ctx.measureText(base).width;
        ctx.fillText(base, x, y);

        ctx.font = subFont;
        ctx.fillText(sub, x + baseWidth / 2 + 2, y + 5);

        ctx.font = baseFont; // Reset font
    }

    // --- Drawing the Circuit ---

    // 1. Main Wires
    ctx.beginPath();
    // Top wire
    ctx.moveTo(x_left, y_top);
    ctx.lineTo(x_right, y_top);
    // Bottom wire
    ctx.moveTo(x_left, y_bottom);
    ctx.lineTo(x_right, y_bottom);
    // Vertical side wires
    ctx.moveTo(x_left, y_top);
    ctx.lineTo(x_left, y_bottom);
    ctx.moveTo(x_right, y_top);
    ctx.lineTo(x_right, y_bottom);
    // Battery connection wires
    ctx.moveTo(x_left, y_bottom);
    ctx.lineTo(x_left, y_batt);
    ctx.lineTo(260, y_batt);
    ctx.moveTo(290, y_batt);
    ctx.lineTo(x_right, y_batt);
    ctx.lineTo(x_right, y_bottom);
    ctx.stroke();

    // 2. Clear space for components by drawing over with white
    ctx.clearRect(130, y_top - r_h/2 -1, r_w, r_h + 2);
    ctx.clearRect(355, y_bottom - r_h/2 -1, r_w, r_h + 2);
    ctx.clearRect(98, y_bottom - 2, 74, 4);
    ctx.clearRect(348, y_top - 2, 74, 4);


    // 3. Components
    // Resistor R1 (top left)
    const r1_x = 160;
    ctx.strokeRect(r1_x - r_w/2, y_top - r_h/2, r_w, r_h);
    drawLabelWithSubscript('R', '1', r1_x, y_top + 30);
    
    // Resistor R2 (bottom right)
    const r2_x = 385;
    ctx.strokeRect(r2_x - r_w/2, y_bottom - r_h/2, r_w, r_h);
    drawLabelWithSubscript('R', '2', r2_x, y_bottom + 30);
    
    // Switch S1 (top right)
    const s1_p_x = 350;
    drawSwitchPivot(s1_p_x, y_top);
    ctx.beginPath();
    ctx.moveTo(s1_p_x, y_top);
    ctx.lineTo(s1_p_x + 50, y_top - 20); // Arm
    ctx.stroke();
    drawLabelWithSubscript('S', '1', s1_p_x + 25, y_top + 28);
    
    // Switch S2 (bottom left)
    const s2_p_x = 100;
    drawSwitchPivot(s2_p_x, y_bottom);
    ctx.beginPath();
    ctx.moveTo(s2_p_x, y_bottom);
    ctx.lineTo(s2_p_x + 50, y_bottom - 20); // Arm
    ctx.stroke();
    drawLabelWithSubscript('S', '2', s2_p_x + 25, y_bottom + 28);

    // Switch S3 (middle)
    ctx.beginPath();
    ctx.moveTo(x_mid, y_bottom);
    ctx.lineTo(x_mid, y_bottom - 50); // Contact wire
    ctx.stroke();
    drawSwitchPivot(x_mid, y_top);
    ctx.beginPath();
    ctx.moveTo(x_mid, y_top);
    ctx.lineTo(x_mid - 35, y_top + 45); // Arm, down-left
    ctx.stroke();
    drawLabelWithSubscript('S', '3', x_mid - 35, y_top + 75);
    
    // 4. Battery Symbol
    ctx.beginPath();
    ctx.moveTo(265, y_batt - 8); // Negative terminal (left, short)
    ctx.lineTo(265, y_batt + 8);
    ctx.moveTo(285, y_batt - 15); // Positive terminal (right, long)
    ctx.lineTo(285, y_batt + 15);
    ctx.stroke();

    // 5. Junctions
    drawJunction(x_left, y_top);
    drawJunction(x_left, y_bottom);
    drawJunction(x_right, y_top);
    drawJunction(x_right, y_bottom);
    drawJunction(x_mid, y_top);
    drawJunction(x_mid, y_bottom);
    
</script>

</body>
</html>